<template>
  <div class="articles-add">
    <el-dialog :title="edordele" :visible="showDlog" width="800px" @close="btnCancel">
      <el-form label-width="100px" :rules="formRules" :model="formModel" ref="check">
        <el-form-item label="文章标题：" prop="title">
          <el-input v-model="formModel.title" placeholder="请输入文章标签" style="width:94%"></el-input>
        </el-form-item>

        <!-- <el-form-item label="文章内容:">123</el-form-item> -->
        <el-form-item label="文章内容:" prop="articleBody" style="height:235px">
          <quill-editor
            style="width:94%;height:200px"
            v-model="formModel.articleBody"
            :options="editorOptions"
          ></quill-editor>
        </el-form-item>

        <el-form-item label="视频地址:" style="margin-top=10px" prop="shipin">
          <el-input v-model="formModel.videoURL" style="width:94%" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <el-row type="flex" justify="center" slot="footer">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 导入富文本方法和样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
// 导入编辑、新增、获取数据 的接口
import { add, update, detail } from "@/api/hmmm/articles";
export default {
  props: {
    // 控制弹层的显示
    showDlog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formModel: {
        // 存放编辑 回填数据的对象
        title: "",
        articleBody: "",
        id: "",
        videoURL: ""
      },
      formRules: {
        // 表单的校验规则
        title: [{ required: true, message: "请输入文章标题", tirgger: "blur" }],
        articleBody: [
          { required: true, message: "请输入文章内容", tirgger: "blur" }
        ]
      },
      // 富文本的配置
      editorOptions: {
        placeholder: "",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["blockquote"],
            ["code-block", "image", "link"]
          ]
        }
      }
    };
  },
  components: {
    quillEditor // 注册富文本
  },
  computed: {
    edordele() {
      // 计算属性 判断 弹层的 标题
      return this.formModel.id ? "编辑" : "新增";
    }
  },
  methods: {
    // 编辑的回填数据
    async detail(row) {
      const { data } = await detail(row);
      this.formModel = data;
      console.log(this.formModel);
    },
    // 确定按钮
    btnOK() {
      this.$refs.check.validate(async isOK => {
        if (isOK) {
          // 要分清楚现在是编辑还是新增
          if (this.formModel.id) {
            // 编辑模式  调用编辑接口
            // await updateDepartments(this.formData);
            await update(this.formModel);
            this.$message.success("编辑用户数据成功");
          } else {
            // 新增模式
            await add(this.formModel); // 调用新增接口 添加父部门的id
            this.$message.success("新增用户数据成功");
          }
          this.$emit("share");
          this.$emit("update:showDlog", false);
        }
      });
    },
    // 取消
    async btnCancel() {
      // 将表单清空
      this.formModel = {
        title: "",
        articleBody: "",
        id: "",
        videoURL: ""
      };
      // 清空校验规则
      await this.$refs.check.resetFields();
      // 关闭弹层
      this.$emit("update:showDlog", false);
    }
  }
};
</script>

<style scoped less="scss">
.articles-add ::v-deep .ql-editor {
  height: 200px;
}
.articles-add ::v-deep .ql-toolbar.ql-snow {
  padding: 0 8px;
}
</style>